<template>
  <div class="approval_page">
    <div class="input_info">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="170px">
        <el-form-item label="项目名称:" prop="projectName">
          <el-input
            v-model="form.projectName"
            placeholder="请输入项目名称"
            :disabled="!isCreateNew"
          ></el-input>
        </el-form-item>

        <el-form-item label="项目申报类别:">
          <el-input
            v-model="form.projectType"
            placeholder="请输入项目申报类别"
            :disabled="!isCreateNew"
          ></el-input>
        </el-form-item>

        <el-form-item label="申报单位:" prop="projectUnit">
          <el-input
            v-model="form.projectUnit"
            placeholder="请输入申报单位"
            :disabled="!isCreateNew"
          ></el-input>
        </el-form-item>

        <el-row>
          <el-col :span="14">
            <el-form-item label="项目负责人姓名/职称:" prop="specialistInfo1">
              <el-input
                v-model="form.specialistInfo1"
                placeholder="请输入项目负责人姓名"
                :disabled="!isCreateNew"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label-width="20px" prop="specialistInfo2">
              <el-input
                v-model="form.specialistInfo2"
                placeholder="请输入项目负责人职称"
                :disabled="!isCreateNew"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="通讯地址/邮编:">
              <el-input
                v-model="form.contractAddress1"
                placeholder="请输入通讯地址"
                :disabled="!isCreateNew"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label-width="20px">
              <el-input
                v-model="form.contractAddress2"
                placeholder="请输入邮编"
                :disabled="!isCreateNew"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="手机号码和电子邮箱:" prop="contractPhone1">
              <el-input
                v-model="form.contractPhone1"
                placeholder="请输入手机号码"
                :disabled="!isCreateNew"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label-width="20px" prop="contractPhone2">
              <el-input
                v-model="form.contractPhone2"
                placeholder="请输入电子邮箱"
                :disabled="!isCreateNew"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="13">
            <el-form-item label="项目开始时间">
              <el-date-picker
                style="width: 100%"
                v-model="form.startTime"
                :disabled="!isCreateNew"
                type="date"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="项目结束时间" label-width="120px">
              <el-date-picker
                style="width: 100%"
                v-model="form.endTime"
                :disabled="!isCreateNew"
                type="date"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="合作单位:">
          <el-input
            v-model="form.cooperateUnit"
            placeholder="请输入合作单位"
            :disabled="!isCreateNew"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div style="height: 16px; background: #f4f5fc"></div>
    <el-form
      style="width: 80%; margin: 0 auto"
      :model="form"
      ref="formRef2"
      :rules="rules2"
      label-width="220px"
      label-position="top"
    >
      <el-form-item label="一、目的和意义" prop="purpose">
        <p class="subtitle">立项的背景、意义，可行性及预期前景分析。</p>
        <el-input
          v-model="form.purpose"
          type="textarea"
          autosize
          placeholder="请输入……"
          :disabled="!isCreateNew"
        ></el-input>
      </el-form-item>

      <el-form-item label="二、实施基础与条件">
        <p class="subtitle">
          申报单位、合作单位及项目团队基本情况。申报创新研发与试验熟化项目和省级林业长期科研基地项目，已开展的前期研究及结果，具备的科研条件，建立的合作等研究条件；谈论拟申报课题发布。
        </p>
        <el-input
          v-model="form.base"
          type="textarea"
          autosize
          placeholder="请输入……"
          :disabled="!isCreateNew"
        ></el-input>
      </el-form-item>

      <el-form-item label="三、实施内容" prop="content">
        <p class="subtitle">
          主要内容要具体明细、层次清楚；申报创新研发与试验熟化项目和省级林业长期科研基地项目，应包括技术难点及创新点的突破、完善措施，采取的技术路线、工艺流程、试产验证、分析测试等；示范推广的具体品种、技术、模式，示范基地的建设，围绕国内外研究现状、技术路线、方法、创新点。
        </p>
        <el-input
          v-model="form.content"
          type="textarea"
          autosize
          placeholder="请输入……"
          :disabled="!isCreateNew"
        ></el-input>
      </el-form-item>

      <el-form-item label="四、实施计划进度" prop="plan">
        <p class="subtitle">按照项目阶段性内容和指标具体到年、月。</p>
        <el-input
          v-model="form.plan"
          type="textarea"
          autosize
          placeholder="请输入……"
          :disabled="!isCreateNew"
        ></el-input>
      </el-form-item>

      <el-form-item label="五、主要技术指标及预期" prop="target">
        <p class="subtitle">
          如：引进、筛选、培育、示范推广的林木新优品种，创新研发、试验熟化、集成示范推广的技术及预期对比效果，建设改进的设备生产线、示范基地及规模；制定技术规程、标准，申请、授权专利或植物新品种权，发表文章，撰写调研报告或决策咨询报告等。
        </p>
        <el-input
          v-model="form.target"
          type="textarea"
          autosize
          placeholder="请输入……"
          :disabled="!isCreateNew"
        ></el-input>
      </el-form-item>

      <!-- <el-form-item label="六、考核指标分解" class="request_class">
        <p class="subtitle">
          如：引进、筛选、培育、示范推广的林木新优品种，创新研发、试验熟化、集成示范推广的技术及预期对比效果，建设改进的设备生产线、示范基地及规模；制定技术规程、标准，申请、授权专利或植物新品种权，发表文章，撰写调研报告或决策咨询报告等。
        </p>
        <el-table
          :stripe="true"
          :data="form.targets"
          style="width: 100%"
          :header-cell-style="{
            background: '#DDDDDD',
            color: '#333333',
          }"
        >
          <el-table-column label="序号" width="50" align="center">
            <template slot-scope="scope">
              {{ scope.row.index + 1 }}
            </template>
          </el-table-column>

          <el-table-column label="单位名称" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.unitName"
                placeholder="请输入单位名称"
                :disabled="!isCreateNew"
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column label="考核指标" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name"
                placeholder="请输入考核指标"
                :disabled="!isCreateNew"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="资金预算(万元)" align="center">
            <template slot-scope="scope">
              <el-input
                type="number"
                v-model="scope.row.yusuan"
                placeholder="请输入资金预算"
                :disabled="!isCreateNew"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="自筹资金(万元)" align="center">
            <template slot-scope="scope">
              <el-input
                type="number"
                v-model="scope.row.zichou"
                placeholder="请输入自筹资金"
                :disabled="!isCreateNew"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column width="140" align="center" v-if="isCreateNew">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-plus"
                @click="addKaoHeLine(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-minus"
                @click="delKaoHeLine(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item> -->

      <el-form-item label="六、实施人员" class="request_class">
        <p class="subtitle">与项目无关的人员不得列入。</p>
        <el-table
          :stripe="true"
          :data="form.user"
          style="width: 100%"
          :header-cell-style="{
            background: '#DDDDDD',
            color: '#333333',
          }"
        >
          <el-table-column label="本单位" width="50" align="left">
            <el-table-column label="序号" width="50" align="center">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="姓名" align="center" width="140">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.userId"
                  filterable
                  placeholder="请选择"
                  :disabled="!isCreateNew"
                  @change="changeUser(scope.row)"
                  allow-create
                >
                  <el-option
                    v-for="item in peopleList"
                    :key="item.uid"
                    :label="item.name"
                    :value="item.uid"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="年龄" align="center" width="120">
              <template slot-scope="scope">
                <el-input-number
                  style="width: 100%"
                  size="small"
                  :min="1"
                  controls-position="right"
                  v-model="scope.row.age"
                  :disabled="!isCreateNew"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="单位" align="center" width="180">
              <template slot-scope="scope">
                <el-input
                  type="textarea"
                  autosize
                  v-model="scope.row.unit"
                  :disabled="!isCreateNew"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="职务、职称" align="center" width="120">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.dept"
                  :disabled="!isCreateNew"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="在项目实施过程中拟承担的具体工作"
              align="center"
              min-width="180"
            >
              <template slot-scope="scope">
                <el-input
                  type="textarea"
                  autosize
                  v-model="scope.row.work"
                  :disabled="!isCreateNew"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              width="240"
              align="center"
              fixed="right"
              v-if="isCreateNew"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-plus"
                  @click="addPeopleLine(scope.$index, 0)"
                ></el-button>
                <el-button
                  v-if="scope.$index > 0"
                  type="danger"
                  size="mini"
                  icon="el-icon-minus"
                  @click="delPeopleLine(scope.$index, 0)"
                ></el-button>
                <!-- 上移 -->
                <el-button
                  v-if="scope.$index > 0"
                  type="success"
                  size="mini"
                  icon="el-icon-top"
                  @click="moveUp(scope.$index, 0)"
                ></el-button>
                <!-- 下移 -->
                <el-button
                  v-if="scope.$index < form.user.length - 1"
                  type="warning"
                  size="mini"
                  icon="el-icon-bottom"
                  @click="moveDown(scope.$index, 0)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>

        <el-table
          :stripe="true"
          :data="form.otherPerson"
          style="width: 100%; margin-top: 30px"
          :header-cell-style="{
            background: '#DDDDDD',
            color: '#333333',
          }"
        >
          <el-table-column label="外单位" align="left">
            <el-table-column label="序号" width="50" align="center">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="姓名" align="center" width="140">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.name"
                  placeholder="请输入"
                  :disabled="!isCreateNew"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="年龄" align="center" width="120">
              <template slot-scope="scope">
                <el-input-number
                  style="width: 100%"
                  size="small"
                  :min="1"
                  controls-position="right"
                  v-model="scope.row.age"
                  :disabled="!isCreateNew"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="单位" align="center" width="180">
              <template slot-scope="scope">
                <el-input
                  type="textarea"
                  autosize
                  v-model="scope.row.unit"
                  :disabled="!isCreateNew"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="职务、职称" align="center" width="120">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.dept"
                  :disabled="!isCreateNew"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="在项目实施过程中拟承担的具体工作"
              align="center"
              min-width="180"
            >
              <template slot-scope="scope">
                <el-input
                  type="textarea"
                  autosize
                  v-model="scope.row.work"
                  :disabled="!isCreateNew"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              width="240"
              align="center"
              fixed="right"
              v-if="isCreateNew"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-plus"
                  @click="addPeopleLine(scope.$index, 1)"
                ></el-button>
                <el-button
                  v-if="scope.$index > 0"
                  type="danger"
                  size="mini"
                  icon="el-icon-minus"
                  @click="delPeopleLine(scope.$index, 1)"
                ></el-button>
                <!-- 上移 -->
                <el-button
                  v-if="scope.$index > 0"
                  type="success"
                  size="mini"
                  icon="el-icon-top"
                  @click="moveUp(scope.$index, 1)"
                ></el-button>
                <!-- 下移 -->
                <el-button
                  v-if="scope.$index < form.otherPerson.length - 1"
                  type="warning"
                  size="mini"
                  icon="el-icon-bottom"
                  @click="moveDown(scope.$index, 1)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item
        style="position: relative"
        label="七、项目实施经费预算"
        class="request_class"
        prop="funds"
      >
        <p class="subtitle">
          根据本格式结合项目具体情况做好编排，每项经费须具体到会计结算科目。
        </p>
        <el-table
          :stripe="true"
          :data="form.funds"
          style="width: 100%"
          show-summary
          :summary-method="getSummaries"
          :header-cell-style="{
            background: '#DDDDDD',
            color: '#333333',
          }"
        >
          <el-table-column type="index" label="序号" width="50" align="center">
            <template slot-scope="scope">
              {{ scope.row.index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="预算支出科目" align="center" width="280">
            <template slot-scope="scope">
              <el-input disabled v-model="scope.row.fundsEnumName"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="金额（万元）" align="center" width="160">
            <template slot-scope="scope">
              <el-input-number
                style="width: 100%"
                :min="0"
                controls-position="right"
                @input="inputVal(scope.row)"
                v-model="scope.row.amount"
                :disabled="!isCreateNew"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.note"
                :disabled="!isCreateNew"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item label="八、保障条件">
        <p class="subtitle">
          1、实施地点及规模（涉及用地的项目，提供依法拥有基地的合法土地使用权。）
        </p>
        <el-input
          v-model="form.conditionFirst"
          type="textarea"
          autosize
          placeholder="请输入……"
          :disabled="!isCreateNew"
        ></el-input>
      </el-form-item>
      <el-form-item label="">
        <p class="subtitle">
          2、组织方式、运行机制与保障措施（保证项目顺利落地实施的,产学研结合等）
        </p>
        <el-input
          v-model="form.conditionSecond"
          type="textarea"
          autosize
          placeholder="请输入……"
          :disabled="!isCreateNew"
        ></el-input>
      </el-form-item>
    </el-form>

    <div class="input_info contain">
      <div class="contain_btn" v-if="loginUser != '科研管理员' && isCreateNew">
        <el-button type="info" size="small" @click="saveProject('', '', 0)">
          取消
        </el-button>
        <el-button
          style="background: #35a06d !important"
          type="primary"
          size="small"
          @click="saveProject('formRef', 'formRef2', 3)"
        >
          导出Word
        </el-button>
        <el-button
          type="warning"
          size="small"
          @click="saveProject('formRef', 'formRef2', 1)"
        >
          暂存
        </el-button>
        <!-- 自立项目没有开启时,不能提交，只能暂存 -->
        <el-button
          type="primary"
          size="small"
          :disabled="!isStart"
          @click="saveProject('formRef', 'formRef2', 2)"
        >
          提交
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
      default: () => {},
    },
    // 审批的时候不能填写
    isDisadled: {
      type: Boolean,
      default: false,
    },
    isStart: {
      type: Boolean,
      default: false,
    },
    // 选择的人员列表
    peopleList: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    // 是不是新建项目
    isCreateNew() {
      return this.$store.state.project.projectInfo.isCreateNew;
    },
  },

  data() {
    // 手机号
    const phoneRegex = /^1[3456789]\d{9}$/;
    // 电子邮箱
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    // 验证 项目实施经费预算
    var validateFunds = (rule, value, callback) => {
      for (let i = 0; i < value.length; i++) {
        if (Number(value[i].amount) < 0) {
          callback(new Error("请正确填写项目实施经费预算"));
        } else {
          callback();
        }
      }
    };
    const loginUserinfo = sessionStorage.getItem("loginUserinfo");
    return {
      loginUser: JSON.parse(loginUserinfo).name,
      rules: {
        projectName: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
        ],
        projectUnit: [
          { required: true, message: "请输入申报单位", trigger: "blur" },
        ],
        specialistInfo1: [
          {
            required: true,
            message: "请输入负责人姓名",
            trigger: "blur",
          },
        ],
        specialistInfo2: [
          {
            required: true,
            message: "请输入负责人职称",
            trigger: "blur",
          },
        ],
        contractPhone1: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            pattern: phoneRegex,
            message: "手机号格式输入错误",
            trigger: "blur",
          },
        ],
        contractPhone2: [
          {
            required: true,
            message: "请输入电子邮箱",
            trigger: "blur",
          },
          {
            pattern: emailPattern,
            message: "电子邮箱格式输入错误",
            trigger: "blur",
          },
        ],
      },
      rules2: {
        purpose: [
          { required: true, message: "请输入目的和意义", trigger: "blur" },
        ],
        content: [
          {
            required: true,
            message: "请输入实施内容",
            trigger: "blur",
          },
        ],
        plan: [
          {
            required: true,
            message: "请输入实施计划进度",
            trigger: "blur",
          },
        ],
        targets: [
          {
            required: true,
            message: "请输入主要技术指标及预期",
          },
        ],
        funds: { validator: validateFunds, trigger: "blur" },
      },
    };
  },
  methods: {
    // 上移
    moveUp(index, type) {
      // 本单位
      if (type == 0) {
        const temp = this.form.user[index]; // 记录当前项
        this.form.user.splice(index, 1); // 移除当前项
        this.form.user.splice(index - 1, 0, temp); // 在前一项插入当前项
      } else {
        // 外单位
        const temp = this.form.otherPerson[index];
        this.form.otherPerson.splice(index, 1);
        this.form.otherPerson.splice(index - 1, 0, temp);
      }
    },
    // 下移
    moveDown(index, type) {
      if (type == 0) {
        const temp = this.form.user[index];
        this.form.user.splice(index, 1);
        this.form.user.splice(index + 1, 0, temp);
      } else {
        const temp = this.form.otherPerson[index];
        this.form.otherPerson.splice(index, 1);
        this.form.otherPerson.splice(index + 1, 0, temp);
      }
    },
    inputVal() {
      this.getSummaries(this.form.funds);
    },
    // 计算合计
    getSummaries(param) {
      let data;
      if (param instanceof Array) {
        data = param;
      } else {
        data = param.data;
      }

      const sums = [];
      data.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
          return;
        }
        const values = data.map((item) => Number(item.amount));

        if (index == 2) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += "万元";
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },
    // 选择实施人员，自动获取单位、年龄、职称.现在没有单位、年龄，职称可能没有
    changeUser(row) {
      let userInfoObj = {};
      for (let i = 0; i < this.peopleList.length; i++) {
        if (row.userId == this.peopleList[i].uid) {
          userInfoObj = this.peopleList[i];
        }
      }
      row.age = 0; //年龄
      row.unit = ""; //单位
      row.dept = userInfoObj.zhiji ?? ""; //职称
    },
    saveProject(formName1, formName2, i) {
      if (formName1 != 0 && formName2 != 0) {
        let form1 = false;
        let form2 = false;
        this.$refs[formName1].validate((valid1) => {
          form1 = valid1;
        });
        this.$refs[formName2].validate((valid2) => {
          form2 = valid2;
        });
        // 导出、暂存、提交
        if (form1 && form2) {
          // 考核指标分解
          // let targets = this.form.targets;
          // if (!targets.length) {
          //   this.msgError("请填写考核指标");
          //   return;
          // } else {
          //   for (let i = 0; i < targets.length; i++) {
          //     if (
          //       !targets[i].unitName ||
          //       !targets[i].name ||
          //       !targets[i].yusuan ||
          //       !targets[i].zichou
          //     ) {
          //       this.msgError("请检查考核指标信息填的数据");
          //       return;
          //     }
          //   }
          // }
          // 实施人员
          let user = this.form.user;
          if (!user.length) {
            this.msgError("请检查实施人员信息填写的数据");
            return;
          } else {
            for (let i = 0; i < user.length; i++) {
              user[i].index = i + 1;
              user[i].sort = i + 1;
              if (
                !user[i].userId ||
                !user[i].age ||
                !user[i].unit ||
                !user[i].dept
              ) {
                this.msgError("内部实施人员信息填写有误");
                return;
              }
            }
          }

          // 实施人员-外部
          let otherUser = this.form.otherPerson;
          for (let i = 0; i < otherUser.length; i++) {
            if (
              !otherUser[i].name ||
              !otherUser[i].age ||
              !otherUser[i].unit ||
              !otherUser[i].dept ||
              !otherUser[i].work
            ) {
              otherUser.splice(i, 1);
            } else {
              otherUser[i].sort = i + 1;
            }
          }

          let funds = this.form.funds;
          for (let i = 0; i < funds.length; i++) {
            funds[i].index = i + 1;
          }

          this.$emit("saveProjectFn", i);
        }
        // 取消
      } else {
        this.$emit("saveProjectFn", i);
      }
    },

    // // 添加考核指标分某解
    // addKaoHeLine(row) {
    //   this.$emit("addKaoHe", row.index);
    // },
    // // 删除考核指标分解某行
    // delKaoHeLine(row) {
    //   this.$emit("delKaoHe", row.index);
    // },

    // 实施人员，添加删除
    addPeopleLine(index, type) {
      this.$emit("addPeopleLine", index, type);
      // if (type == 0) {
      // } else {
      //   this.$emit("addOtherLine", index);
      // }
    },
    delPeopleLine(index, type) {
      this.$emit("delPeopleLine", index, type);
      // if (type == 0) {
      // } else {
      //   this.$emit("delOtherLine", index);
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .has-gutter {
  font-weight: bold;
}
::v-deep .el-form-item__content {
  line-height: 1.25rem;
  color: #c0c4cc;
}
::v-deep .el-table__cell {
  border: none !important;
}

::v-deep .el-input.is-disabled .el-input__inner {
  // background: #fff !important;
  color: #606266 !important;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #606266 !important;
}

::v-deep .el-form--label-top .el-form-item__label {
  padding: 0;
}

.request_class::before {
  content: "*";
  color: #f56c6c;
  position: relative;
  top: 1.875rem;
  left: -0.625rem;
}

.approval_page {
  width: 100%;
  box-sizing: border-box;
  .input_info {
    padding: 1rem 0;
    width: 80% !important;
    margin: 0 auto;
  }
  .contain {
    // .contain_info {
    //   .title {
    //     font-size: 1rem;
    //     color: #364a71;
    //     font-weight: bold;
    //     line-height: 1.1875rem;
    //   }
    //   .subtitle {
    //     padding: 0;
    //     margin: 0;
    //     background: red;
    //     font-size: 0.875rem;
    //     color: #333333;
    //     line-height: 0.5rem !important;
    //   }
    //   ::v-deep .last_head {
    //     background: transparent !important;
    //     border: transparent !important;
    //   }
    // }
    .contain_btn {
      margin-top: 2.5rem;
      height: 2rem;
      width: 100%;
      text-align: center;
    }
  }
}
</style>
